<template>
  <Modal
    v-model="showCreateExtMethodModal"
    title="创建扩展方法"
    width="50"
    :mask-closable="false"
    @on-cancel="handleCreateExtMethodCancel"
  >
    <Form
      label-position="right"
      :label-width="100"
      ref="extMethodForm"
      :model="extMethodForm"
      :rules="extMethodValidate"
      style="margin-top: 15px"
    >
      <FormItem label="名称">
        <Input
          clearable
          v-model="extMethodForm.name"
          placeholder="请输入名称"
        />
      </FormItem>
      <FormItem label="扩展方法" prop="ext_method">
        <Input
          clearable
          v-model="extMethodForm.ext_method"
          placeholder="请输入扩展方法"
        />
      </FormItem>
      <FormItem label="扩展方法说明">
        <Input
          clearable
          type="textarea"
          :rows="3"
          v-model="extMethodForm.ext_method_desc"
        />
      </FormItem>
      <FormItem label="参数说明">
        <Input
          clearable
          type="textarea"
          :rows="3"
          v-model="extMethodForm.args_desc"
        />
      </FormItem>
      <FormItem label="返回值说明">
        <Input
          clearable
          type="textarea"
          :rows="3"
          v-model="extMethodForm.returned_value_desc"
        />
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="default" @click="handleCreateExtMethodCancel">取消</Button>
      <Button
        type="primary"
        @click="handleCeateExtMethodSubmit('extMethodForm')"
        >确定</Button
      >
    </div>
  </Modal>
</template>
<script>
import { createExtMethod } from "@/api/HttpAutoTestService/ext-method";

export default {
  name: "ext-method-create",
  props: {
    createExtMethod: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    showCreateExtMethodModal: {
      get() {
        return this.createExtMethod;
      },
      set(val) {
        this.$emit("update:createExtMethod", val);
      },
    },
  },
  data() {
    return {
      extMethodForm: {
        name: "",
        ext_method: "",
        ext_method_desc: "",
        args_desc: "",
        returned_value_desc: "",
      },
      extMethodValidate: {
        ext_method: [
          { required: true, message: "请输入扩展方法", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleCeateExtMethodSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          createExtMethod(this.extMethodForm)
            .then((res) => {
              if (res.status === 201) {
                this.$Message.info("创建成功");
                this.handleCreateExtMethodCancel();
              } else {
                this.$Message.error("创建失败");
              }
            })
            .catch((err) => {
              this.$Modal.error({
                title: "系统异常，请联系管理员……",
                content: JSON.stringify(err),
                closable: true,
              });
            });
        }
      });
    },
    handleCreateExtMethodCancel() {
      this.showCreateExtMethodModal = false;
      this.extMethodForm = {
        name: "",
        ext_method: "",
        ext_method_desc: "",
        args_desc: "",
        returned_value_desc: "",
      };
      this.$emit("initExtMethodTable");
      this.$refs['extMethodForm'].resetFields();
    },
  },
};
</script>
<style scope>
</style>